<script setup>
import { ref, reactive, toRaw } from 'vue';
import { service, common } from '@utils';
import { ElMessage } from 'element-plus';

const emit = defineEmits(['refresh','getTree']);

const visible = ref(false);
const formRef = ref();
const tabName = ref(1);
const data = ref();
const title = ref('');
const label = ref('');
const state = reactive({
    param: {},
    searchData: [],
    orgGroupPageData: [],
});

const rules = {
    name: [{ required: true, message: '请输入', trigger: 'blur' }],
    orgCode: [{ required: true, message: '请输入', trigger: 'blur' }],
    parentId: [{ required: true, message: '请输入', trigger: 'blur' }],
    orgGroupsId: [{ required: true, message: '请输入', trigger: 'blur' }],
};

const open = (type, data, searchData) => {
    state.param = JSON.parse(JSON.stringify(data));
    state.searchData = searchData || [];
    title.value = type;
    getData();
    visible.value = true;
};

const close = () => {
    visible.value = false;
    state.param = {};
    state.searchData = [];
};

const getData = async companyId => {
    const orgGroupPageData = await service.auth.orgGroupPage(1, 99999, {});
    if (orgGroupPageData.resultCode == 8200) {
        state.orgGroupPageData = orgGroupPageData.list;
    }
};

const sure = async () => {
    formRef.value.validate(valid => {
        if (valid) {
            realSubmit();
        }
    });
};
const realSubmit = async () => {
    let res;
    res = await service.auth.orgUpdate(state.param);
    if (res.resultCode == 8200) {
        ElMessage.success(title.value + '成功');
        close();
        emit('refresh');
        emit('getTree');
    } else {
        ElMessage.warning(title.value + '失败');
    }
};
//把方法暴露给父组件
defineExpose({
    open,
});
</script>

<template>
    <div class="dialogDiv">
        <el-dialog v-model="visible" :title="title" center :close-on-click-modal="false" @close="close" destroy-on-close :width="600">
            <section>
                <h4 class="labelDiv">
                    {{ label }}
                </h4>
                <el-form :model="state.param" :rules="rules" ref="formRef" label-width="160px" label-suffix=":" onsubmit="return false;">
                    <el-form-item label="机构名称" prop="name">
                        <el-input v-model="state.param.name" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="唯一编码" prop="orgCode">
                        <el-input v-model="state.param.orgCode" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="上级机构" prop="parentId">
                        <el-tree-select style="width: 100%" v-model="state.param.parentId" :data="state.searchData" show-checkbox :check-strictly="true" :default-checked-keys="[state.param.parentId]" :default-expanded-keys="state.param.parentId?[state.param.parentId]:[]"  filterable :props="{ label: 'name',value:'id' }" node-key="id" />
                    </el-form-item>
                    <el-form-item label="每日推送数量" prop="probeRisk">
                        <el-input v-model="state.param.dailyPushNumber" type="number" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="进件单价" prop="unitPrice">
                        <el-input v-model="state.param.unitPrice" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="组别" prop="orgGroupsId">
                        <el-select style="width: 100%" v-model="state.param.orgGroupsId" clearable>
                            <el-option v-for="item in state.orgGroupPageData" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </section>
            <template #footer v-if="tabName === 1">
                <span class="flex-align-end">
                    <div class="margin-right20">
                        <el-button @click="close">取消</el-button>
                    </div>
                    <el-button type="primary" @click="sure">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<style scoped>
.labelDiv {
    margin-top: 0;
}
:deep(.el-tabs__content) {
    max-height: 300px;
    overflow: auto;
}
/*滚动条整体部分*/
.mytable-scrollbar ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
/*滚动条的轨道*/
.mytable-scrollbar ::-webkit-scrollbar-track {
    background-color: #ffffff;
}
/*滚动条里面的小方块，能向上向下移动*/
.mytable-scrollbar ::-webkit-scrollbar-thumb {
    background-color: #bfbfbf;
    border-radius: 5px;
    border: 1px solid #f1f1f1;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
    background-color: #a8a8a8;
}
.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
    background-color: #787878;
}
/*边角，即两个滚动条的交汇处*/
.mytable-scrollbar ::-webkit-scrollbar-corner {
    background-color: #ffffff;
}
</style>
